<script setup lang="ts">

import cardImg from "@/assets/images/card.png";
import {getBankCardDetail} from "@/api/bankCardApi.ts";
import {getUsdtDetail} from "@/api/usdtApi.ts";
import {onMounted, ref} from "vue";


const bankCard = ref([]);
const fetchBankCardData = () => {
  getBankCardDetail().then(res => {
    bankCard.value = res.data;
  })
}

const usdt = ref([]);
const fetchUsdtData = () => {
  getUsdtDetail().then(res => {
    usdt.value = res.data;
  })
}

onMounted(() => {
  fetchBankCardData();
  fetchUsdtData();
})

</script>

<template>
  <div class="bindBankCardExcess">
    <div style="text-align: right;">
      <van-image width="180px" height="100%" :src="cardImg"/>
    </div>
    <router-link :to="{name:'bindCard'}" class="bind-card" v-if="bankCard == null">
      <span style="font-size: 60px;font-weight: bold">+</span>
      <span>{{ $t('bindCardExcess.bindCard') }}</span>
    </router-link>
    <router-link :to="{name:'withdraw',params:{type:'bankCard'}}" class="bind-card" v-else>
      <span style="font-weight: bold">{{ $t('bindCardExcess.bankCardWithdraw') }}</span>
    </router-link>
  </div>
  <div class="bindBankCardExcess">
    <router-link :to="{name:'bindUsdt'}" class="bind-card" v-if="usdt == null">
      <span style="font-size: 60px;font-weight: bold">+</span>
      <span>{{ $t('bindCardExcess.usdt') }}</span>
    </router-link>
    <router-link :to="{name:'withdraw',params:{type:'usdt'}}" class="bind-card" v-else>
      <span style="font-weight: bold">{{ $t('bindCardExcess.usdtWithdraw') }}</span>
    </router-link>
  </div>
</template>

<style scoped lang="less">
.bindBankCardExcess {
  padding: 25px;

  .bind-card {
    background-image: url('../../assets/images/bangkabg.png');
    background-size: cover; /* 背景图片覆盖容器 */
    background-position: center; /* 图片居中显示 */
    width: 100%; /* 设定宽度 */
    height: 200px; /* 设定高度 */
    color: #ffffff;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>